<template>
  <div>
    <div class="i_bg bg_color">
      <div class="i_ban_bg">
        <!--Begin Banner Begin-->
        <div class="banner">
          <div class="top_slide_wrap">
            <div class="slide_box bxslider">
              <el-carousel height="401px">
              <el-carousel-item>
                <img
                  src="http://192.168.1.146:8088/ban1.jpg"
                  width="740"
                  height="401"
                />
              </el-carousel-item>
              <el-carousel-item>
                <img
                  src="http://192.168.1.146:8088/ban2.jpg"
                  width="740"
                  height="401"
                />
              </el-carousel-item>
              <el-carousel-item>
                <img
                  src="http://192.168.1.146:8088/ban3.jpg"
                  width="740"
                  height="401"
                />
              </el-carousel-item>
              <el-carousel-item>
                <img
                  src="http://192.168.1.146:8088/ban4.jpg"
                  width="740"
                  height="401"
                />
              </el-carousel-item>
            </el-carousel>
          </div>
          </div>
        </div>
        <!--End Banner End-->
        <div class="inews">
          <div class="news_t">
            <span class="fr"
              ><router-link to="/managerIndex/managerNews"
                >更多</router-link
              ></span
            >新闻资讯
          </div>
          <ul>
            <li v-for="(news, index) in newsList" :key="news.id">
              <span v-if="index % 2 == 0">[ 特惠 ]</span>
              <span v-else>[ 公告 ]</span>
              <router-link
                :to="{
                  name: 'newsDetail',
                  query: { id: news.id },
                }"
                >{{ news.title }}</router-link
              >
            </li>
          </ul>
          <div class="charge_t">
            话费充值
            <div class="ch_t_icon"></div>
          </div>
          <form>
            <table
              border="0"
              style="width: 205px; margin-top: 10px"
              cellspacing="0"
              cellpadding="0"
            >
              <tr height="35">
                <td width="33">号码</td>
                <td><input type="text" value="" class="c_ipt" /></td>
              </tr>
              <tr height="35">
                <td>面值</td>
                <td>
                  <select class="jj" name="city">
                    <option value="0" selected="selected">100元</option>
                    <option value="1">50元</option>
                    <option value="2">30元</option>
                    <option value="3">20元</option>
                    <option value="4">10元</option>
                  </select>
                  <span style="color: #ff4e00; font-size: 14px">￥99.5</span>
                </td>
              </tr>
              <tr height="35">
                <td colspan="2">
                  <input type="submit" value="立即充值" class="c_btn" />
                </td>
              </tr>
            </table>
          </form>
        </div>
      </div>
      <!--Begin 热门商品 Begin-->
    
      <div class="content mar_20">
        <img
          src="http://192.168.1.146:8088/mban_1.jpg"
          width="1200"
          height="110"
        />
      </div>
      <!--Begin 进口 生鲜 Begin-->
      <div v-for="(category1, index) in categoryList" :key="category1.id">
        <div class="i_t mar_10">
          <span class="floor_num">{{ index + 1 }}F</span>
          <span class="fl">{{category1.name}}</span>
          <span class="i_mores fr">
            <router-link
              v-for="(category2,index) in category1.children"
              :key="category2.id"
              :to="{
                name: 'productOfCategory',
                query: { id: category2.id },
              }" 
              ><span v-if="index<6">{{category2.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </router-link>
          </span>
        </div>
        <div class="content">
          <div class="fresh_left">
            <div class="fre_ban">
              <div id="imgPlay1">
                <ul class="imgs" id="actor1">
                  <li>
                    <a href="#"
                      ><img
                        src="http://192.168.1.146:8088/fre_r.jpg"
                        width="211"
                        height="286"
                    /></a>
                  </li>
                  <li>
                    <a href="#"
                      ><img
                        src="http://192.168.1.146:8088/fre_r.jpg"
                        width="211"
                        height="286"
                    /></a>
                  </li>
                  <li>
                    <a href="#"
                      ><img
                        src="http://192.168.1.146:8088/fre_r.jpg"
                        width="211"
                        height="286"
                    /></a>
                  </li>
                </ul>
                <div class="prevf">上一张</div>
                <div class="nextf">下一张</div>
              </div>
            </div>
            <div class="fresh_txt">
              <div class="fresh_txt_c">
                <span
                  v-for="(category3,index1) in category1.children"
                  :key="category3.id"
                >
                  <router-link
                    :to="{
                      name: 'productOfCategory',
                      query: { id: category3.id },
                    }"
                    v-if="index1<2"
                  >
                  {{ category3.name }}:
                  </router-link>
                  <router-link
                    v-for="(category4,index2) in category3.children"
                    :key="category4.id"
                    :to="{
                      name: 'productOfCategory',
                      query: { id: category4.id },
                    }"
                    ><span v-if="index2<3">{{ category4.name }}</span></router-link
                  ><br>
                </span>
              </div>
            </div>
          </div>
          <div class="fresh_mid">
            <ul>
              <li v-for="(product) in category1.products.slice(0, 6)" :key="product.id">

                <div class="name"><router-link :to="{name: 'productDetail' , query: {id:product.id}}">    {{product.name}} </router-link> </div>
                <div class="price">
                  <font>￥<span>{{product.price}}</span></font> &nbsp; 26R
                </div>
                <div class="img">
                  <router-link :to="{name: 'productDetail' , query: {id:product.id}}">
                  <img
                      :src="`http://192.168.1.146:8088/${product.fileName}`"
                      width="185"
                      height="155"
                  /></router-link>
                </div>
              </li>
            </ul>
          </div>
          <div class="fresh_right">
            <ul>
              <li>
                <a href="#"
                  ><img
                    src="http://192.168.1.146:8088/fre_b1.jpg"
                    width="260"
                    height="220"
                /></a>
              </li>
              <li>
                <a href="#"
                  ><img
                    src="http://192.168.1.146:8088/fre_b2.jpg"
                    width="260"
                    height="220"
                /></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--End 进口 生鲜 End-->
      <!--Begin Footer Begin -->
      <div class="b_btm_bg b_btm_c">
        <div class="b_btm">
          <table
            border="0"
            style="
              width: 210px;
              height: 62px;
              float: left;
              margin-left: 75px;
              margin-top: 30px;
            "
            cellspacing="0"
            cellpadding="0"
          >
            <tr>
              <td width="72">
                <img
                  src="http://192.168.1.146:8088/b1.png"
                  width="62"
                  height="62"
                />
              </td>
              <td>
                <h2>正品保障</h2>
                正品行货 放心购买
              </td>
            </tr>
          </table>
          <table
            border="0"
            style="
              width: 210px;
              height: 62px;
              float: left;
              margin-left: 75px;
              margin-top: 30px;
            "
            cellspacing="0"
            cellpadding="0"
          >
            <tr>
              <td width="72">
                <img
                  src="http://192.168.1.146:8088/b2.png"
                  width="62"
                  height="62"
                />
              </td>
              <td>
                <h2>满38包邮</h2>
                满38包邮 免运费
              </td>
            </tr>
          </table>
          <table
            border="0"
            style="
              width: 210px;
              height: 62px;
              float: left;
              margin-left: 75px;
              margin-top: 30px;
            "
            cellspacing="0"
            cellpadding="0"
          >
            <tr>
              <td width="72">
                <img
                  src="http://192.168.1.146:8088/b3.png"
                  width="62"
                  height="62"
                />
              </td>
              <td>
                <h2>天天低价</h2>
                天天低价 畅选无忧
              </td>
            </tr>
          </table>
          <table
            border="0"
            style="
              width: 210px;
              height: 62px;
              float: left;
              margin-left: 75px;
              margin-top: 30px;
            "
            cellspacing="0"
            cellpadding="0"
          >
            <tr>
              <td width="72">
                <img
                  src="http://192.168.1.146:8088/b4.png"
                  width="62"
                  height="62"
                />
              </td>
              <td>
                <h2>准时送达</h2>
                收货时间由你做主
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="b_nav">
        <dl>
          <dt><a href="#">新手上路</a></dt>
          <dd><a href="#">售后流程</a></dd>
          <dd><a href="#">购物流程</a></dd>
          <dd><a href="#">订购方式</a></dd>
          <dd><a href="#">隐私声明</a></dd>
          <dd><a href="#">推荐分享说明</a></dd>
        </dl>
        <dl>
          <dt><a href="#">配送与支付</a></dt>
          <dd><a href="#">货到付款区域</a></dd>
          <dd><a href="#">配送支付查询</a></dd>
          <dd><a href="#">支付方式说明</a></dd>
        </dl>
        <dl>
          <dt><a href="#">会员中心</a></dt>
          <dd><a href="#">资金管理</a></dd>
          <dd><a href="#">我的收藏</a></dd>
          <dd><a href="#">我的订单</a></dd>
        </dl>
        <dl>
          <dt><a href="#">服务保证</a></dt>
          <dd><a href="#">退换货原则</a></dd>
          <dd><a href="#">售后服务保证</a></dd>
          <dd><a href="#">产品质量保证</a></dd>
        </dl>
        <dl>
          <dt><a href="#">联系我们</a></dt>
          <dd><a href="#">网站故障报告</a></dd>
          <dd><a href="#">购物咨询</a></dd>
          <dd><a href="#">投诉与建议</a></dd>
        </dl>
        <div class="b_tel_bg">
          <a href="#" class="b_sh1">新浪微博</a>
          <a href="#" class="b_sh2">腾讯微博</a>
          <p>
            服务热线：<br />
            <span>400-123-4567</span>
          </p>
        </div>
        <div class="b_er">
          <div class="b_er_c">
            <img
              src="http://192.168.1.146:8088/er.gif"
              width="118"
              height="118"
            />
          </div>
          <img src="http://192.168.1.146:8088/ss.png" />
        </div>
      </div>
      <!--End Footer End -->
    </div>
  </div>
</template>

<script>
export default {
  name: "pageIndex",
  data() {
    return {
      newsList: {},
      categoryList: {},
    };
  },
  methods: {
    newsInfo() {
      this.$axios({
        method: "post",
        url: "api/news/pageInfoNews",
      })
        .then((rs) => {
          console.log("新闻资讯前五条：" + rs);
          this.newsList = rs.data.news;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    categoryInfo() {
      this.$axios({
        method: "post",
        url: "/api/category/pageInfoCategory",
      })
        .then((rs) => {
          console.log(rs);
          this.categoryList = rs.data.categoryList;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    showSubCategories(category) {
      this.$set(this.categoryStates, category.id, true);
    },
  },
  mounted() {
    this.newsInfo();
    this.categoryInfo();
  },
};
</script>

<style scoped>
.el-carousel__item img {
  width: 740px;
  height: 401px;
  object-fit: cover; /* 保持图片比例 */
}
.el-carousel {
  width: 740px; /* 与父div宽度一致 */
  margin: 0 auto; /* 水平居中 */
}
.el-carousel__item img {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
